// import babel from "esbuild-plugin-babel";
import fs from "fs";
import path from "path";
// compiler vue
// const vueCompiler = require("@vue/compiler-sfc");
// const vuePlugin = require("esbuild-plugin-vue3");
import vue from "esbuild-plugin-vue-next";
// const babel = require("esbuild-plugin-babel");
import { lessLoader } from "esbuild-plugin-less";
import html from "@chialab/esbuild-plugin-html";

/**
 * 加载.vue文件
 *
 * 未实现，弃用 - 后续在研究
 */
const vueTransformPlugin = {
  name: "vue",
  setup(build) {
    // 创建.vue命名空间，支持加载.vue文件
    // build.onResolve({ filter: /\.vue$/ }, (args) => ({
    //   path: args.path,
    //   namespace: "vue",
    // }));

    build.onLoad({ filter: /\.vue$/ }, async (args) => {
      const contents = await fs.promises.readFile(args.path, "utf8");

      const { descriptor } = vueCompiler.parse({ source: contents });
      console.log(descriptor);
      const code = `
            const __script = {
              ${descriptor.script.content}
            };
            export default __script;
          `;
      // console.log(descriptor);
      // const { descriptor } = vueCompiler.parse(contents, {
      //   filename: args.path,
      // });
      // console.log(descriptor);
      // // 获取 template、script 和 style 部分的代码
      // const templateCode = descriptor.template
      //   ? descriptor.template.content
      //   : "";
      // const scriptCode = descriptor.script ? descriptor.script.content : "";
      // const styleCode = descriptor.styles[0]
      //   ? descriptor.styles[0].content
      //   : "";

      // // 编译 template 部分
      // const { ast, code } = vueCompiler.compileTemplate(templateCode);
      // // const renderCode = vueCompiler.generate(ast, { mode: "function" }).code;
      // // 转换 script 部分
      // const transformedScript = vueCompiler.compileScript(scriptCode, {
      //   filename: args.path,
      //   tsx: false,
      //   jsxPragma: "h",
      //   jsxFragmentPragma: "Fragment",
      // });
      // const scriptCodeOutput = transformedScript.code;
      // 处理 style 部分
      // const processedStyle = await postcss([autoprefixer]).process(styleCode, {
      //   from: undefined,
      // });
      // const cssCode = processedStyle.css;

      // 将 template、script 和 style 组合起来
      // const output = `
      //     import { createVNode } from 'vue';
      //     export default {
      //       __esModule: true,
      //       render() {
      //         return ${code}
      //       },
      //       ...${scriptCodeOutput},
      //       $_scopeId: '${descriptor.styles[0] ? descriptor.styles[0].id : ""}',
      //       $_cssVars: ${JSON.stringify(descriptor.cssVars)},
      //       $_cssScope: ${JSON.stringify(descriptor.cssScope)},
      //       $_hoisted_1: ${JSON.stringify(descriptor.hoists)},
      //       $_ssrInlineRender: ${
      //         !!descriptor.scriptSetup && descriptor.scriptSetup.inlineTemplate
      //       },
      //       $_sfc_main$: {
      //         components: {},
      //         emits: ${JSON.stringify(descriptor.emits)}
      //       }
      //     };
      //   `;
      // console.log(output);
      return {
        contents: "",
        loader: "js",
      };
    });
  },
};

export default {
  // 编译入口
  // entryPoints: ["src/index.js"],
  entryPoints: ["./index.html"],
  assetNames: "assets/[name]-[hash]",
  chunkNames: "[ext]/[name]-[hash]",
  // stdin: {
  //   contents: "import {h} from 'vue'",
  //   resolveDir: "./src",
  // },
  //
  bundle: true,
  // 编译输出的文件名
  // outfile: "out.js",
  // 编译文件输出的文件夹
  outdir: "dist",
  // 定义全局常量
  define: {
    // "process.env.NODE_ENV": "production",
  },
  // 打包输出的格式
  format: "esm",
  // 配置loader
  loader: {
    ".js": "jsx",
    ".png": "file",
  },
  // jsxFactory: "h",
  // jsxFragment: "Fragment",
  inject: ["libs/jsxFactory.js"],
  // 代码分离，一是多入口共享文件；二是import动态导入的依赖项
  splitting: true,
  // 插件
  plugins: [
    // vuePlugin(),
    vue(),
    lessLoader(),
    //  nodeModulesPolyfillPlugin(),
    // babel(),
    html(),
  ],
  // 构建目标es新标准
  target: ["esnext"],
  // 构建目标平台
  platform: "browser",
  color: true,
  alias: {
    "@": path.resolve("./src"),
  },
};
